<template>
    <div class="userContainer" :style="'min-height: '+docheight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="centerTop">
          <div class="userCont">
            <div class="userImg">
              <img :src="userInfo.head_img+ossSrc">
            </div>
            <div class="userInfo">
              <div class="userName">{{ userInfo.nick_name }}</div>
            </div>
          </div>
          <div class="topCard">
            <div class="cardItem">
              <div class="cardName">消费金额</div>
              <div class="cardVal">{{ userInfo.consumption_price }}</div>
            </div>
            <div class="cardLine"></div>
            <div class="cardItem">
              <div class="cardName">累计订单</div>
              <div class="cardVal">{{ userInfo.order_sum }}</div>
            </div>
            <div class="cardLine"></div>
            <div class="cardItem" @click="saveTechFn">
              <div class="cardName">收藏列表</div>
              <div class="cardVal">{{ userInfo.collect_num }}</div>
            </div>
          </div>
        </div>
        <div class="centerList">
          <div class="listItem" @click="listFn(item)" :key="index" v-for="(item,index) in listArr">
            <div :class="'iconfont '+item.icon"></div>
            <div class="listItemVal">
              {{item.val}}
            </div>
            <div class="iconfont icon-jinrujiantou"></div>
          </div>
        </div>
        <div class="userTip">
            <div class="telLine"><span class="iconfont icon-kefu2"></span> 客服热线:{{ userInfo.hotline_mobile }}</div>
            <div>技术支持:四川省本地鸟科技有限公司</div>
        </div>
      </div>
      <footcpm></footcpm>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
      <toast v-model="showToast" width="50%" position="middle" type="text" :time="1000">{{showText}}</toast>
    </div>
  </template>
  
  <script>
  import {Toast } from 'vux'
  import footcpm from '@/components/footcpm'
  import { my } from '@/http/api'
  import getLoad from '@/components/public/getLoad'
  import getTimeOut from '@/components/public/getTimeOut'
  export default {
    components:{getTimeOut,getLoad,Toast,footcpm},
    data(){
      return{
        showTimeOut: false,
        showCont:false,
        showText:'',
        showToast:false,
        listArr:[
          {val:'消费记录',icon:'icon-xiaofeijilu'},
          {val:'关于我们',icon:'icon-guanyu'},
          {val:'保洁员招募',icon:'icon-zhaopin'},
          {val:'商务合作',icon:'icon-hezuo'},
        ],
        userInfo:{},
      }
    },
    methods:{
      getData(){
        my().then((res)=>{
          if(res.data.code==1){
            this.userInfo = res.data.data
          }else{
            this.showToast = true
            this.showText = '用户信息获取失败'
          }
          this.showCont= true
        }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
      },
      saveTechFn(){
        this.$router.push({path:'/saveTech'})
      },
      listFn(item){
        if(item.val=='关于我们'){
          this.$router.push({path:'/about'})
        }else if(item.val=='消费记录'){
          this.$router.push({path:'/record'})
        }else if(item.val=='保洁员招募'){
          this.$router.push({path:'/techJoin'})
        }else if(item.val=='商务合作'){
          this.$router.push({path:'/shopJoin'})
        }
      },
    },
    
    created() {
      this.getData()
    }
  }
  </script>
  
  <style scoped lang="less">
  .userContainer{
    // background-color: #FFFEF2;
    width: 100%;
    padding-bottom:3.5rem;
    box-sizing: border-box;
    .gzMask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        color: white;
        z-index: 111;
        display: flex;
        align-items: center;
        justify-content: center;
        .gzImgCont{
          width: 50%;
          text-align: center;
          img{
            width: 100%;
            border-radius: 0.25rem;
          }
          .erweimaText{
            margin-top: 0.25rem;
          }
          .closeaErweima{
            margin-top: 0.75rem;
            border: 1px solid #fff;
            padding: 0.25rem;
            border-radius: 2rem;
          }
        }
        .bigMaskImg{
          width: 90%;
          .closeaErweima{
            width: 60%;
            margin: 1.5rem auto 0;
          }
        }
      }
    .centerTop{
      width: 100%;
      background-image:linear-gradient(to bottom,#916ce0,#a159d1);
      padding: 1.5rem 4% 1.25rem;
      box-sizing: border-box;
      .userCont{
        width: 100%;
        // align-items: center;
        // display: flex;
        .userImg{
          width: 4rem;
          height: 4rem;
          position: relative;
          margin: 0 auto;
          border-radius: 50%;
          .boyIcon{
            background-color: rgb(103, 83, 218);
          }
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .userInfo{
          color: rgb(240,240,240);
          text-align: center;
          margin-top: 0.75rem;
          .userName{
            font-size: 0.8rem;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
          }
          .userTel{
            font-size: 0.6rem;
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
          }
          .userDes{
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.6rem;
            overflow:hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
        .seticon{
          margin-right: 1.5rem;
          font-size:1.2rem;
          color: white;
        }
      }
      .topCard{
        width: 100%;
        display: flex;
        justify-self: center;
        margin-top: 1rem;
        align-items: center;
        .cardLine{
          height: 1.5rem;
          width: 1px;
          background-color: #ddd;
        }
        .cardItem{
          width: 100/2%;
          text-align: center;
          padding: 0.5rem 0;
          color: white;
          .cardName{
            font-size: 0.7rem;
          }
          .cardVal{
            font-size: 1rem;
            font-weight: bold;
            margin-top: 0.4rem;
          }
        }
      }
    }
    .centerList{
      width: 100%;
      padding: 0 4%;
      margin-top: 1rem;
      box-sizing: border-box;
      .listItem{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.7rem 0;
        .iconfont{
          font-size: 1.1rem;
        }
        .listItemVal{
          margin: 0 1.25rem;
          width: 0.5rem;
          flex: 1;
          font-size: 0.7rem;
        }
      }
    }
    .userTip{
        color: #666;
        position: absolute;
        font-size: 0.6rem;
        text-align: center;
        bottom: 4rem;
        left: 0;
        width: 100%;
        .telLine{
          margin-bottom: 0.75rem;
        }
    }
  }
  </style>
  